<!-- 事项变动申请 -->
<template>
  <c-dialog
    title="事项变动申请"
    :visible.sync="dialogVisible"
    width="800px"
    @close="handleClose"
    :close-on-click-modal="false"
  >
    <c-form
      label-position="right"
      label-width="110px"
      :rules="rules"
      ref="formRef"
      :model="form"
    >
      <div>
        <c-row :gutter="20">
          <c-col :span="24">
            <c-form-item label="变动申请原因" prop="changeReason">
              <c-input
                type="textarea"
                v-model="form.changeReason"
                placeholder="请输入变动申请原因"
                :rows="4"
              ></c-input>
            </c-form-item>
          </c-col>
        </c-row>
      </div>
      <c-form-item label="上传附件">
        <FileUpload
          :files.sync="fileList"
          accept=".jpg,.jpeg,.png,.pdf,.PDF,.doc,.docx,.ppt,.xlsx,.pptx"
          :maxsize="10"
        >
          <div class="el-upload__tip" slot="tip"></div>
        </FileUpload>
        <div>支持类型：图片、文件类型</div>
      </c-form-item>
    </c-form>
    <div class="form-btn">
      <el-button type="primary" size="medium" @click="sumbit">
        提交申请
      </el-button>
      <el-button size="medium" @click="cancel"> 取消 </el-button>
    </div>
  </c-dialog>
</template>
<script>
import FileUpload from '@/component/FileUpload/FileUpload'
import { changeSubmit } from '@/api/publish'
export default {
  name: 'ChangeApply',
  data() {
    return {
      dialogVisible: false,
      form: {
        changeReason: ''
      },
      rules: {
        changeReason: [
          { required: true, message: '请输入变动申请原因', trigger: 'blur' },
          { max: 500, message: '长度500字符以内', trigger: 'change' }
        ]
      },
      fileList: [] // 处理附件
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    serialNumber: {
      type: String,
      default: ''
    },
    itemCode: {
      type: String,
      default: ''
    }
  },
  components: {
    FileUpload
  },
  computed: {},
  watch: {
    visible(visible) {
      this.dialogVisible = visible
      if (visible) {
        this.fileList = []
      }
    },
    dialogVisible(visible) {
      this.$emit('update:visible', visible)
    }
  },
  methods: {
    handleClose() {
      this.dialogVisible = false
      this.$refs.formRef.resetFields()
    },
    sumbit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.saveData()
        } else {
          return false
        }
      })
    },
    getParams() {
      let fileList = []
      if (this.fileList) {
        fileList = this.fileList.map((file) => {
          return {
            fileName: file.name,
            fileUrl: file.url || ''
          }
        })
      }
      return {
        ...this.form,
        itemCode: this.itemCode,
        serialNumber: this.serialNumber,
        fileList: fileList
      }
    },
    saveData() {
      changeSubmit(this.getParams()).then(({ success }) => {
        if (success) {
          this.$message({
            type: 'success',
            message: '申请成功!'
          })
          this.$emit('saveSubmit')
        }
      })
    },
    cancel() {
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="scss">
$btn-wrap-height: 34px;

.form-btn {
  height: $btn-wrap-height;
  width: 100%;
  text-align: right;
  // position: absolute;
  bottom: 0;
}
</style>
